// 任务记录网站的 JavaScript 代码
// 使用数组来存储任务数据
let tasks = [];

// 获取 DOM 元素
const taskForm = document.getElementById('taskForm');
const taskTitleInput = document.getElementById('taskTitle');
const taskDescriptionInput = document.getElementById('taskDescription');
const tasksList = document.getElementById('tasks');

// 添加任务的事件监听器
taskForm.addEventListener('submit', function(event) {
    event.preventDefault(); // 阻止表单默认提交行为
    
    const title = taskTitleInput.value.trim();
    const description = taskDescriptionInput.value.trim();
    
    if (title) {
        // 创建新任务对象
        const newTask = {
            id: Date.now(), // 使用时间戳作为唯一 ID
            title: title,
            description: description,
            completed: false
        };
        
        // 添加到任务数组
        tasks.push(newTask);
        
        // 清空输入框
        taskTitleInput.value = '';
        taskDescriptionInput.value = '';
        
        // 更新任务列表显示
        renderTasks();
    } else {
        alert('请输入任务标题！');
    }
});

// 渲染任务列表的函数
function renderTasks() {
    // 清空当前列表
    tasksList.innerHTML = '';
    
    // 遍历任务数组，为每个任务创建列表项
    tasks.forEach(task => {
        const taskItem = document.createElement('li');
        taskItem.className = 'task-item';
        if (task.completed) {
            taskItem.classList.add('completed');
        }
        
        taskItem.innerHTML = `
            <div class="task-content">
                <div class="task-title">${task.title}</div>
                <div class="task-description">${task.description || '无描述'}</div>
            </div>
            <div class="task-actions">
                <button class="complete-btn" data-id="${task.id}">${task.completed ? '标记未完成' : '标记完成'}</button>
                <button class="delete-btn" data-id="${task.id}">删除</button>
            </div>
        `;
        
        tasksList.appendChild(taskItem);
    });
    
    // 添加事件监听器到按钮
    addEventListenersToButtons();
}

// 为任务按钮添加事件监听器的函数
function addEventListenersToButtons() {
    // 标记完成/未完成按钮
    const completeButtons = document.querySelectorAll('.complete-btn');
    completeButtons.forEach(button => {
        button.addEventListener('click', function() {
            const taskId = parseInt(this.getAttribute('data-id'));
            toggleTaskCompletion(taskId);
        });
    });
    
    // 删除按钮
    const deleteButtons = document.querySelectorAll('.delete-btn');
    deleteButtons.forEach(button => {
        button.addEventListener('click', function() {
            const taskId = parseInt(this.getAttribute('data-id'));
            deleteTask(taskId);
        });
    });
}

// 切换任务完成状态的函数
function toggleTaskCompletion(taskId) {
    const taskIndex = tasks.findIndex(task => task.id === taskId);
    if (taskIndex !== -1) {
        tasks[taskIndex].completed = !tasks[taskIndex].completed;
        renderTasks();
    }
}

// 删除任务的函数
function deleteTask(taskId) {
    if (confirm('确定要删除这个任务吗？')) {
        tasks = tasks.filter(task => task.id !== taskId);
        renderTasks();
    }
}

// 初始化：渲染任务列表（如果有初始任务）
document.addEventListener('DOMContentLoaded', function() {
    renderTasks();
});